<div id="dashboard_page" class="page" style="display:block">
  <section class="content-header">
    <h1 data-i18n="dashboard">Dashboard</h1>
  </section>
  <section class="content">
    <div class="alert-danger alert alert-no-icon" id="dashboard_message" style="display:none;padding:5px;padding-left:5px;margin-bottom:15px;"></div>
    <div class="alert-danger alert alert-no-icon" id="secondary_dashboard_message" style="display:none;padding:5px;padding-left:5px;margin-bottom:15px;"></div>
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3><span id="account_balance" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p><span data-i18n="account_balance">Account Balance</span></p>
          </div>
          <div class="icon"><i class="fas fa-briefcase"></i></div>
          <a href="#" class="small-box-footer" data-toggle="modal" data-target="#account_details_modal"><span data-i18n="more_info">More info</span> <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner">
            <h3><span id="account_forged_balance" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="forged_balance">Mined Balance</p>
          </div>
          <div class="icon"><i class="ion ion-hammer"></i></div>
          <a href="#" id="goto_forged_blocks" class="small-box-footer"><span data-i18n="more_info">More info</span> <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3><span id="account_nr_assets" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="assets_owned">Assets Owned</p>
          </div>
          <div class="icon"><i class="ion ion-pie-graph"></i></div>
          <a href="#" class="small-box-footer goto-page" data-page="my_assets"><span data-i18n="more_info">More info</span> <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
          <div class="inner">
            <h3><span id="brs_version_dashboard" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p><span id="brs_version_info" data-i18n="brs_version">BRS Version</span> <span class="label label-danger" id="brs_update" style="display:none;"></span></p>
          </div>
          <div class="icon"><i class="fas fa-code"></i></div>
          <a href="#" class="small-box-footer" data-toggle="modal" data-target="#brs_modal"><span data-i18n="more_info">More info</span> <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="box box-primary">
          <div class="box-header">
            <h3 class="box-title" data-i18n="recent_transactions">Recent Transactions</h3>
          </div>
          <div class="box-body no-padding">
            <div class="data-container data-loading" data-no-padding="true" data-extra="#dashboard_transactions_footer">
              <table class="table table-striped" id="dashboard_transactions_table">
                <thead>
                  <tr>
                    <th data-i18n="date">Date</th>
		    <th data-i18n="type">Type</th>
                    <th colspan="2" data-i18n="amount_plus_fee">Amount + Fee</th>
                    <th data-i18n="account">Account</th>
                    <th data-i18n="confirmations_short" style="width:40px">Conf.</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
              <div class="data-empty-container">
                <p data-i18n="no_transactions_yet">No transactions yet.</p>
              </div>
            </div>
          </div>
          <div class="box-footer" id="dashboard_transactions_footer" style="display: none"><button class="btn btn-primary goto-page" data-page="transactions"><i class="fas fa-caret-right"></i> <span data-i18n="view_more">View More</span></button></div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="box box-primary">
          <div class="box-header">
            <h3 class="box-title" data-i18n="recent_blocks">Recent Blocks</h3>
          </div>
          <div class="box-body no-padding">
            <div class="data-container data-loading" data-no-padding="true" data-extra="#dashboard_blocks_footer">
              <table class="table table-striped" id="dashboard_blocks_table">
                <thead>
                  <tr>
                    <th data-i18n="height" style="width: 30px">Height</th>
                    <th data-i18n="date">Date</th>
                    <th data-i18n="amount_plus_fee">Amount + Fee</th>
                    <th data-i18n="nr_transactions_short"># TX</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
              <div class="data-empty-container">
                <p data-i18n="no_blocks_found">No blocks found.</p>
              </div>
            </div>
          </div>
          <div class="box-footer" id="dashboard_blocks_footer" style="display: none"><button class="btn btn-primary goto-page" data-page="blocks"><i class="fas fa-caret-right"></i> <span data-i18n="view_more">View More</span></button></div>
        </div>
      </div>
    </div>
  </section>
</div>
